<!--
 * @Author: C.
 * @Date: 2023-12-07 13:42:03
-->
<template>
  <PageWrapper title="设备详情">
    <view class="machine-msg-box">
      <t-avatar :url="machineStateDetail.PhotoUrl" size="xl" />
      <view class="machine-desc">
        <view class="machine-desc-name"> {{ idRef }} </view>
        <view class="machine-desc-dept"> -- </view>
      </view>
    </view>
    <t-switch-tab
      v-model="currentTabIndex"
      :tabs="tabsData"
      inactive-text-color="#fff"
      inactive-bg-color="#422fcc"
    >
      <view v-if="currentTabIndex === 0">
        <ChartWrapper title="设备状态">
          <view class="box-wrapper">
            <view
              v-for="(item, index) in headerSchema"
              :key="index"
              class="data-box"
              :style="{}"
            >
              <view class="data-box-title">
                {{ item.label }}
              </view>
              <view class="data-box-value">
                {{ machineStateDetail[item.field] }}
                <span class="value-unit">{{ item.unit }}</span>
              </view>
            </view>
          </view>
          <RuntimeBar
            style="margin-top: 30rpx"
            :time-list="machineStateDetail.SequentialDatas"
          />
        </ChartWrapper>
        <ChartWrapper title="加工信息">
          <qiun-data-charts
            type="mix"
            :opts="opts"
            :chart-data="machineStateDetail.ProcessingInfo"
            :stripe="true"
          />
        </ChartWrapper>
        <ChartWrapper title="运行信息">
          <view class="run-msg-wrapper">
            <view class="left">
              <view v-for="item in xyzsMsg" :key="item.field" class="item">
                <span class="item-title">{{ item.label }}</span>
                <span>{{ runMsg[item.field] }}{{ item.unit }}</span>
              </view>
            </view>
            <view class="right">
              <view v-for="item in runSchema" :key="item.field" class="item2">
                <span class="item2-title">{{ item.label }}</span
                ><span class="item2-value"
                  >{{ runMsg[item.field] }}{{ item.unit }}</span
                >
              </view>
            </view>
          </view>
        </ChartWrapper>
      </view>
      <view v-if="currentTabIndex === 1">
        <WeekRun :device-id="idRef" />
      </view>
    </t-switch-tab>
  </PageWrapper>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { reactive, ref } from 'vue'

// ----------------------------- hooks -----------------------------
import { onLoad } from '@dcloudio/uni-app'
import RuntimeBar from './cpns/runtime-bar.vue'
// ----------------------------- 组件 -----------------------------
import { headerSchema } from './schema'
import WeekRun from './cpns/WeekRun.vue'
import { usePolling } from '@/hooks/event/usePolling'
import ChartWrapper from '@/components/chart-wrapper/index'
import PageWrapper from '@/components/page-wrapper'

import { getDeviceById } from '@/api/report/deviceCollection'
import { dateFm } from '@/utils/format/dateTime'
// ----------------------------- 其他引入 -----------------------------
//----------------------------- 变量声明区 -----------------------------
const currentTabIndex = ref(0)
const tabsData = ['实时', '统计']
const idRef = ref('')
const machineStateDetail = reactive<Recordable>({
  SequentialDatas: [],
  OffLineTime: 0,
  RunningTime: 0,
  TrunOnTime: 0,
  UtilizationRate: 0,
  ProcessingInfo: {},
  PhotoUrl: '',
  DeviceStateRecord: {},
})
const runSchema = [
  { label: '设备编号', field: 'DeviceId' },
  { label: '程序名', field: 'Program_Name', unit: '' },
  // { label: '设备状态', field: 'DeviceState', unit: '' },
  { label: '刀号', field: 'Tool_Number', unit: '' },
  { label: '进给轴倍率', field: 'Feed_Axis_Magnification', unit: '%' },
  { label: '主轴负载', field: 'Spindle_Load', unit: '%' },
  // { label: '插入时间', field: 'InsertTime', unit: '',custom:true },
]
const xyzsMsg = [
  { label: 'X', field: 'MechanicalCoordinates_X', unit: '' },
  { label: 'Y', field: 'MechanicalCoordinates_Y', unit: '' },
  { label: 'Z', field: 'MechanicalCoordinates_Z', unit: '' },
  { label: '主轴转速', field: 'Spindle_Speed', unit: '' },
  { label: '进给速率', field: 'Feed_Rate', unit: '' },
]
const runMsg = ref<Recordable>({})

const opts = {
  update: true,
  duration: 20, // 0
  animation: false,
  yAxis: {
    data: [
      { position: 'left', title: '', min: 0, max: 24, unit: 'h' },
      { position: 'right', title: '', min: 0, max: 100, unit: '%' },
    ],
    legend: { position: 'top' },
  },
}
// ----------------------------- hooks使用区 -----------------------------

// ----------------------------- 钩子函数区 -----------------------------
const { flush } = usePolling(getDeviceDetail)
onLoad((res: any) => {
  idRef.value = res.id
  flush()
})
//  ----------------------------- 自定义方法区 -----------------------------
async function getDeviceDetail() {
  const data = await getDeviceById({ deviceId: idRef.value })
  machineStateDetail.SequentialDatas = data.DeviceState.SequentialDatas
  machineStateDetail.OffLineTime = data.DeviceState.OffLineTime
  machineStateDetail.RunningTime = data.DeviceState.RunningTime
  machineStateDetail.TrunOnTime = data.DeviceState.TrunOnTime
  machineStateDetail.PhotoUrl = data.DeviceState.PhotoUrl
  runMsg.value = data.DeviceStateRecord
  machineStateDetail.UtilizationRate = data.DeviceState.UtilizationRate
  machineStateDetail.ProcessingInfo = handleMixChartData(data.ProcessingInfo)
}

function handleMixChartData(list: Recordable[]) {
  const categories: any[] = []
  const PlanTime: any = {
    name: '计划时间',
    type: 'column',
    format: 'yAxisDemo2',
    data: [],
  }
  const ActualTime: any = {
    name: '实际时间',
    type: 'column',
    format: 'yAxisDemo2',
    data: [],
  }
  const UtilizationRate: any = {
    name: '稼动率',
    type: 'line',
    format: 'yAxisDemo3',
    data: [],
  }
  list.forEach((item) => {
    categories.push(dateFm(item.Date, 'MM/dd'))
    PlanTime.data.push(item.PlanTime)
    ActualTime.data.push(item.ActualTime)
    UtilizationRate.data.push(item.UtilizationRate * 24)
  })

  return {
    categories,
    series: [PlanTime, ActualTime, UtilizationRate],
    targetAdd: '9%',
  }
}
</script>
<style lang="scss" scoped>
.machine-msg-box {
  display: flex;
  padding: 20rpx;
  margin: 10rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-radius: 5rpx;
  align-items: center;
  .machine-desc {
    margin-left: 35rpx;

    &-name {
      font-weight: bold;
      font-size: 35rpx;
    }
    &-dept {
      margin-top: 25rpx;
      /* font-weight: bold; */
      font-size: 25rpx;
      color: #6b6b6b;
    }
  }
}
.box-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  .data-box {
    height: 100rpx;
    /* border: 1rpx solid #fff; */
    padding: 10rpx;
    margin-right: 5rpx;
    border-radius: 10rpx;
    background: #eee;
    /* box-shadow: inset 20px 20px 60px #808080, inset -20px -20px 60px #b8b8b8; */
    /* color: #fff; */
    &-title {
      font-size: 22rpx;
    }
    &-value {
      padding-top: 10rpx;
      font-size: 45rpx;
      font-weight: bold;
      .value-unit {
        font-size: 25rpx;
        font-weight: normal;
      }
    }
  }
}
.run-msg-wrapper {
  display: flex;
  .left {
    width: 50%;
    background-color: rgb(218, 241, 255);
    outline: 1rpx solid #2b74b8;
    /* height: 250rpx; */
    border-radius: 5rpx;
    font-weight: bold;
    color: #2b74b8;
    .title {
      margin-top: 20rpx;
    }
    .item {
      margin-top: 20rpx;
      &-title {
        padding: 20rpx 40rpx 20rpx 15rpx;
      }
    }
  }
  .right {
    width: 49%;
    /* height: 250rpx; */
    padding: 0 20rpx;
    .item2 {
      border-bottom: 1rpx solid #ccc;
      display: flex;
      justify-content: space-between;
      &-title {
        padding: 10rpx;
        font-weight: bold;
      }
      &-value {
        padding: 10rpx;
        color: #4dd2ff;
      }
    }
  }
}
</style>
